<template>
    <div class="backContainer">
        <div class="topBackground">
            <img :style="{opacity: topBack.opacity}" :src="topBack.pic" alt=""/>
            <div class="slogan">
                <h1 v-html="topBack.title"></h1>
                <p v-html="topBack.description"></p>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps(['topBack'])
</script>

<style scoped>
.backContainer {
    position: relative;
}

.topBackground {
    background-color: #000;
}

.topBackground img {
    display: block;
    height: 70vh;
    width: 100%;
    object-fit: cover;
}

.slogan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 50%;
}

.topBackground h1 {
    text-transform: uppercase;
    font-size: 66px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.topBackground p {
    font-size: 26px;
}
</style>